<template>
    <div class="login">
        <img src="../assets/login.a4c656a9.png" alt="">
    <van-form>
  <van-field
    v-model="mobile"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <p><span style="color:#ccc;">找回密码</span><span style="color:#ccc;" @click="$router.push('/smslogin')">注册/验证码登录</span></p>
  <div style="margin: 16px;">
    <van-button round block type="warning" native-type="submit" @click="login">登录</van-button>
  </div>
</van-form>
<div class="fotter">
    <p>第三方登录</p>
    <ul>
        <li style="margin:0rem; textAlign: center;"><img style="width:1rem;height:1rem" src="../assets/WX.png" alt=""><span style="marginBottom:1rem;">微信登录</span></li>
         <li><img style="width:1rem;height:1rem" src="../assets/QQ.png" alt=""><span>QQ登录</span></li>
    </ul>
    
</div>
    </div>
</template>

<script>
// import { Toast } from 'vant';

import { yzLogin  } from "../Request/http.js";
export default {
  name: "EverydayLogin",

  data() {
    return {
    mobile:'',
      username: "",
      password: ""
    };
  },

  mounted() {},

  methods: {
      login() {
      yzLogin({
        mobile:this.mobile,
        password:this.password,
        type: 1,
        client:1
      }).then(res => {
        console.log(res, "login");
        this.$router.push("/main");
        localStorage.setItem("login", JSON.stringify(res));
      });
    }
    
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: #fff;
  img {
    width: 90%;
    padding: 0.8rem 0.4rem;
  }
  p {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
}
ul{display: flex;
      flex-direction: row;
      justify-content: space-around;
    li{
        display: flex;
      flex-direction: row;
     text-align: center;
     span{
         padding-top: 1rem;
         font-size: .5rem;
         color: #ccc;
     }
    }
}
</style>